<template>
  <div class="app-container">
    <!--      搜索-->
    <div class="head-container">
      <!-- 选择公司-->
      <el-form ref="form" :inline="true" :model="form" size="small" label-width="66px">
          <el-form-item style="margin-bottom: 0;" label-width="100px" clearable
                        label="公司" prop="companyId">
            <el-select
              v-model="query.companyId"
              placeholder="全部"
              @change="crud.toQuery"
              style="width:92%">
              <el-option
                v-for="item in companys"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        <!-- 分配状态-->
        <el-select v-model="query.distributeState" clearable size="small" placeholder="分配状态" class="filter-item"
                   style="width: 90px" @change="crud.toQuery">
          <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"
          />
        </el-select>
          <el-input v-model="query.name" clearable size="small"
                    placeholder="输入招聘名字或者手机号"
                    style="width: 200px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"/>
          <rrOperation :permission="permission"/>
        </el-form>
      <!-- 分配和删除按钮-->
      <el-button
        v-permission="permission.edit"
        class="filter-item"
        size="mini"
        type="success"
        :disabled="crud.selections.length === 0"
        icon="el-icon-edit"
        @click="dis"
      >
        分配
      </el-button>
      <el-button
        slot="reference"
        v-permission="permission.del"
        class="filter-item"
        type="danger"
        icon="el-icon-delete"
        size="mini"
        :disabled="crud.selections.length === 0"
        @click="deleteRecruit(crud.selections)"
      >
        删除
      </el-button>
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading"
              :data="crud.data"
              style="width: 100%;"
              @selection-change="crud.selectionChangeHandler"
              :cell-style="changeStyle">
      <el-table-column type="selection" width="35"/>
      <el-table-column prop="name" label="姓名" width="80" />
      <el-table-column prop="cityId" label="城市" width="80" />
      <el-table-column prop="sex" label="性别" width="50" />
      <el-table-column prop="phone" label="联系方式"/>
      <el-table-column prop="degree" :formatter="getDegreeType" label="学历"/>
      <el-table-column prop="major" label="专业"/>
      <el-table-column prop="productId" label="产品线"/>
      <el-table-column prop="channelId" label="渠道"/>
      <el-table-column prop="sourceId" label="来源途径"/>
      <el-table-column prop="distributeState" :formatter="getDistributeType" label="分配状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.distributeState == '0' ? 'danger' : 'success'"
            disable-transitions>{{scope.row.distributeState == '0'?'未分配':'已分配'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="分配人"/>
      <el-table-column prop="createTime" label="资源录入时间"/>
    </el-table>
    <!--    分配人事专员-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible="showDis"
      :title="disTitle"
      width="500px"
    >
      <el-form
        ref="form"
        :model="form"
        size="small"
        label-width="80px"
      >
        <el-form-item
          label="人事专员"
          prop="name"
        >
          <el-select
            v-model="query.userId"
            placeholder="请选择"
            style="width:92%">
            <el-option
              v-for="item in users"
              :key="item.username"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="text"
          @click="cancelDis"
        >
          取消
        </el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="distribution"
        >
          确认
        </el-button>
      </div>
    </el-dialog>
    <!--分页组件-->
    <pagination/>
  </div>
</template>
<script>
import crudCompany from '@/api/system/company'
import crudRecruit from '@/api/system/recruit'
import crudUser from '@/api/system/user'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'

const defaultForm = { name: null, companyId: null }
export default {
  name: 'Distribution',
  components: { pagination, rrOperation },
  cruds() {
    return CRUD({
      title: '招聘者',
      url: 'api/recruit/all',
      crudMethod: { ...crudCompany }
    })
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      companys: [],
      disTitle: '分配人事专员',
      showDis: false,
      users: [], // 人事专员列表
      permission: {
        edit: ['admin', 'recruit:edit'],
        del: ['admin', 'recruit:del']
      },
      enabledTypeOptions: [
        { key: 1, display_name: '已分配' },
        { key: 0, display_name: '未分配' }
      ],
      form: {
        name: null
      }
    }
  },
  mounted() {
    this.getAllCompanys()
  },
  methods: {
    // 点击分配按钮
    dis() {
      this.showDis = true
      this.listConsultant()
    },
    // 取消分配
    cancelDis() {
      this.showDis = false
    },
    // 获取学位类型
    getDegreeType(row) {
      if (row.degree == '1') {
        return '小学'
      }
      if (row.degree == '2') {
        return '初中'
      }
      if (row.degree == '3') {
        return '高中'
      }
      if (row.degree == '4') {
        return '大专'
      }
      if (row.degree == '5') {
        return '本科'
      }
      if (row.degree == '6') {
        return '硕士'
      }
      if (row.degree == '7') {
        return '博士'
      }
    },
    // 分配状态
    getDistributeType(row) {
      if (row.distributeState == '0') {
        return '未分配'
      }
      if (row.distributeState == '1') {
        return '已分配'
      }
    },
    // 删除招聘者信息
    deleteRecruit(datas) {
      const ids = []
      datas.forEach(d => {
        ids.push(d.id)
      })
      crudRecruit.del(ids).then(res => {
        this.$notify({
          title: '删除成功',
          type: 'success',
          duration: 1500
        })
        this.crud.toQuery()
      }).catch(err => {
      })
    },
    changeStyle(row) {
      if (row.column.label === '分配状态') {
        if (row.row.distributeState == '0') {
          return {
            color: 'red',
            fontWeight: 'bolder'
          }
        } else {
          return {
            color: 'green',
            fontWeight: 'bolder'
          }
        }
      }
    },
    // 获取所有公司信息
    getAllCompanys() {
      crudCompany.getAllCompany().then(res => {
        this.companys = res.content
      }).catch(() => {
      })
    },
    // 获取分配人事专员列表
    listConsultant() {
      const id = this.query.companyId ? this.query.companyId: 0
      crudUser.listConsultant(id).then(res => {
        this.users = res
      }).catch(() => {
      })
    },
    // 分配人事的专员
    distribution() {
      const userId = this.query.userId
      const recruitIds = []
      this.crud.selections.forEach(r => {
        recruitIds.push(r.id)
      })
      const data = {
        userId,
        recruitIds
      }
      crudRecruit.distribution(data).then(res => {
        this.crud.notify('分配成功', 'success')
        this.showDis = false
        this.crud.toQuery()
      }).catch(err => {
        this.crud.notify('分配失败', 'error')
      })
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
